import { PageContainer } from '@ant-design/pro-components';
import '@umijs/max';
import React, {useEffect, useState} from "react";
import {Pagination, Tabs, TabsProps} from "antd";
import PostList from "@/pages/Search/components/PostList";
import {searchAllUsingPost} from "@/services/backend/searchController";
import PictureList from "@/pages/Search/components/PictureList";
import UserList from "@/pages/Search/components/UserList";
import {ref} from "valtio";
import Search from "antd/es/input/Search";
/**
 * 聚合搜索
 *
 * @constructor
 */
const SearchPage: React.FC = () => {
  const [postList, setPostList] = useState<API.PostVO[]>([]);
  const [pictureList, setPictureList] = useState<API.Picture[]>([]);
  const [userList, setUserList] = useState<API.UserVO[]>([]);
  const [total, setTotal] = useState<number>(10);

  const initSearchParams = ref({
    current: 1,
    pageSize: 10,
    searchText: '',
    sortField: '',
    sortOrder: '',
    type: 'post',
  });

  const [searchRequest, setSearchRequest] = useState<API.SearchRequest>(initSearchParams);


  // const [searchQuery,setSearchQuery] = useState<API.SearchRequest>(initSearchParams);

  const getNewInfoList = async (page: number, pageSize: number) =>{
    searchRequest.current = page;
    searchRequest.pageSize = pageSize;
    const res = await searchAllUsingPost(searchRequest);
    // @ts-ignore
    if (searchRequest.type === 'post'){    // @ts-ignore
      setPostList(res.data);
      setTotal(res.total!!);
    }else if (searchRequest.type === 'picture'){
      setTotal(1);
      // @ts-ignore
      setPictureList(res.data);
    }else if (searchRequest.type === 'user'){
      // @ts-ignore
      setUserList(res.data);
      setTotal(res.total!!)
    }
  }

  // 加载数据
  useEffect(() => {
    getNewInfoList(searchRequest.current ? searchRequest.current : 1,searchRequest.pageSize ? searchRequest.pageSize : 10);
  }, []);

  const onChange = (key: string) => {
    if (key === '1'){
      searchRequest.type = 'post';
    }else if (key === '2'){
      searchRequest.pageSize = 99;
      searchRequest.type = 'picture';
    }else if (key === '3'){
      searchRequest.type = 'user';
    }
    getNewInfoList(initSearchParams.current,initSearchParams.pageSize);
  };
  // @ts-ignore
  // @ts-ignore
  const items: TabsProps['items'] = [
    {
      key: '1',
      label: '文章',
      children: <PostList postList={postList}/>,
    },
    {
      key: '2',
      label: '图片',
      children: <PictureList pictureList={pictureList}/>,
    },
    {
      key: '3',
      label: '用户',
      children: <UserList userList={userList} /> ,
    },
  ];
  // 定义一个处理搜索事件的函数
  const handleSearch = (value: string) => {
    console.log('用户输入的内容:', value);
    searchRequest.searchText = value;
    getNewInfoList(initSearchParams.current,initSearchParams.pageSize);
    // 这里可以添加更多的逻辑处理，例如发起搜索请求等
  };

  return (
    <PageContainer>
      <Search
        placeholder="请输入您需要搜索的内容"
        allowClear
        enterButton="Search"
        size="large"
        onSearch={handleSearch}
      />
      <Tabs defaultActiveKey="1" items={items} onChange={onChange} />
      <Pagination
        total={total}
        showSizeChanger
        showQuickJumper
        pageSizeOptions={ [4, 8, 16, 20]}
        showTotal={(total) => `总共: ${total} 条`
          }
        onChange={(page, pageSize) => {
          // 直接发起请求
          getNewInfoList(page, pageSize);
          // console.log("当前页码："+page);
          // console.log("当前每页大小"+pageSize);
        }}

      />
    </PageContainer>
  );
};
export default SearchPage;
